<template>
  <div class="list" ref="wrapper">
     <div>
        <div class="area">
            <div class="title border-topbottom">当前城市</div>
            <div class="button-list">
                <div class="button-wrapper">
                    <div class="button">{{this.city}}</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div
                    class="button-wrapper"
                    v-for="item of hot"
                    :key="item.id"
                    @click="handelCityClick(item.name)"
                >
                   <div class="button">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="area"
            v-for="(item,key) of cities"
            :key="key"
            :ref="key"
        >
            <div class="title border-topbottom">{{key}}</div>
            <ul class="item-list">
                <li 
                   class="item border-bottom"
                   v-for="innerItem of item"
                   :key="innerItem.id"
                   @click="handelCityClick(innerItem.name)"
                >
                    {{innerItem.name}}
                </li>
            </ul>
        </div>
     </div>
  </div>
</template>

<script>
import { mapState } from 'vuex' //vuex提供的高级api，用来映射数据到此组件里
import Bscroll from 'better-scroll'
export default {
  name: "CityList",
  props:{
      cities:Object,
      hot:Array,
      letter:String
  },
  computed: {
    ...mapState(['city'])//这个city就可以在这个组件里去用了
  },
  methods:{
      //点击切换城市事件 commit是传到vux里的
      handelCityClick (city) {
          this.$store.commit('changeCity',city)
          this.$router.push('/')
      }
  },
  mounted () {
      //列表滚动效果
      this.scroll=new Bscroll(this.$refs.wrapper)
  },
  watch: {
      //处理
      letter () {
          if(this.letter){
              const element=this.$refs[this.letter][0]
              this.scroll.scrollToElement(element)
          } 
      }
  }
}
</script>

<style scoped>
.border-topbottom:before{
    border-color: #ccc;
}
.border-topbottom:after{
    border-color: #ccc;
}
.border-bottom::before{
    border-color: #ccc;
}
.list{
    overflow: hidden;
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;
}
.title{
    line-height: .54rem;
    background: #eee;
    padding-left: .2rem;
    color: #666;
    font-size: .26rem;
}
.button-list{
    overflow: hidden;
    padding: .1rem;
}
.button-wrapper{
     float: left;
     width: 30.33%;
}
.button{
    margin: .1rem;
    padding: .1rem 0;
    text-align: center;
    border:.02rem solid #ccc;
    border-radius: .06rem;
}
.item{
    line-height: .76rem;
    color: #666;
    padding-left: .2rem;
}
</style>